<html>
<head>
  
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script src="jquery-json-2.2.js"></script>
<script>

    var API_SERVER = 'http://api.put.io/v1/';

    var services = [

        {'service': 'user', 'methods': {
            'info': {},
            'friends': {}
          }
        },

        {'service': 'files', 'methods': {
            'list': {"parent_id":0, "limit":10, "offset":0}
          }
        },

        {'service': 'messages', 'methods': {
            'list':{}
          }
        },
      
        {'service': 'transfers', 'methods': {
            'list': {}
        }},

        {'service': 'urls', 'methods': {
            'list': {}
        }},

        {'service': 'subscriptions', 'methods': {
            'list': {}
          }
        }

    ];


  $(document).ready(function(){

    for (var v in services){
      $('#service')[0].innerHTML += '<option value="'+services[v].service+'">'+services[v].service+'</option>';
    }


    $("#service").change(function () {
          var str = "";
          $("#service option:selected").each(function (n,el) {
                  if (el.value!='-'){

                    var s = null; 

                    $('#method')[0].innerHTML = '';

                    for (k in services){
                      if (el.value == services[k].service){
                        s = services[k];
                      }
                    }


                    if (s){
                        for (var v in s.methods){
                          $('#method')[0].innerHTML += '<option value="'+v+'">'+v+'</option>';
                        }

                    }
                    

                  }
              });
          
        }).change();

        $('#update').click(function(){
            Api.prepare();
        })
  });




  var Api = {
    get: function(o){
      var url = API_SERVER + o.service + '/?method=' + o.method;

      var r = {'api_secret': o.secret, "api_key": o.api_key, "params": o.params}

      url = url + '&request='+$.toJSON(r)+'&callback=?';

      $.getJSON(url, function(data){

          console.debug(data);

          if (data.error){
            $('#error-msg #msg')[0].innerHTML = data.error_message;
            $('#error-msg').show();
          } else {
            $('#error-msg').hide();
            Api.show(data.response.results)
          }


      });
    },

    prepare: function(){
        $('#heading').show();

        var service = $("#service option:selected")[0];
        var method  = $("#method option:selected")[0];

        if (service && method){
          var o = {'service': service.value, 'method':method.value}

          o.params = {}
          
          for (s in services){
            if (services[s].service == o.service){
              for (m in services[s].methods){
                if (m==o.method){
                  o.params = services[s].methods[m];
                }
              }
            }
          }

          

          o.secret = $('#api_secret')[0].value;
          o.api_key = $('#api_key')[0].value;


          Api.get(o);
        }
    },

    show: function(rows){
        $('#heading').hide();

        var table = '<table><tbody>';
        var a = 0;
        var th = '';
        var trs = '';

        for(var r in rows){
          var cols = (rows[r]);

          if (a==0){
            th += '<tr id="th">';
          }

          var tr = '<tr>';
          for (var c in cols){
            // console.debug(c);

            if (a==0){
              th += '<td>' + c + '</td>';
            }

            tr += '<td>' + cols[c] + '</td>';
          }

          if (a==0){
            th += '</tr>';
          }

          tr += '</tr>';

          trs += tr;

          a++;
        }



        table += th;
        table += trs;
        table += '</tbody></table>';

        $('#results')[0].innerHTML = table;

    }

  }




</script>

<style>
  #results table {
    font-size:9px;
    font-family: verdana;
  }

  #results table #th td {
    border-bottom: 1px solid #000000;
  }

</style>


</head>


<body >
  <div id="content">
    api_key: <input type="text" name="api_key" id="api_key" value="#API_KEY#" ><br/>
    api_secret: <input type="text" name="api_secret" id="api_secret" value="#API_SECRET#" ><br/>


    <form id="params">
      <select name="service" id="service">
        <option>-</option>
      </select>

      <select name="method" id="method">
        <option>-</option>
      </select>

      <input type="button" value="update" id="update">

    </form>

    <span id="error-msg">
      error message: <br/>
      <span id="msg">

      </span>
    </span>

    <span id="heading" class="heading" style="display:none">loading..</span>

    <span id="results">
      
    </span>


  </div>
</body>
</html>